<template>
  <div class="canvas-container">
    <canvas ref='canvasId'/>
    <h3>柱状图</h3>
  </div>
</template>

<script>
export default {
  mounted(){
    this.draw()
  },
  methods:{
    draw(){
      //创建画布
      const canvasCon = document.querySelector('.canvas-container')
      const canvas = this.$refs["canvasId"]
      const canvasWidth = canvasCon.clientWidth
      const canvasHeight = canvasCon.clientWidth
      canvas.width = canvasWidth
      canvas.height = canvasHeight
      const ctx = canvas.getContext('2d')

      const conWidth = canvasWidth * 0.8
      const conHeight = canvasWidth * 0.8
      const x = conWidth*0.1
      const y = conWidth*0.1

      ctx.beginPath()
      ctx.strokeStyle = '#000000'
      ctx.moveTo(x,y)
      ctx.lineTo(x,y+conHeight)
      ctx.lineTo(x+conHeight,y+conHeight)
      ctx.stroke()

      
      let barWidth = (conWidth-20) / 5
      for(var i = 0; i < 5; i++){
        // 随机取高
        let barHeight = conHeight*(Math.random())
        // 随机取色
        // Math.random()*0xffffff : 14558754.817121562
        // parseInt : 14558754
        // toString(16) : e417f3
        ctx.fillStyle = '#'+parseInt(Math.random()*0xffffff).toString(16)
        ctx.fillRect(20+y+barWidth*i,conHeight+x-barHeight,barWidth-20,barHeight)
      }
    }
  }
}
</script>

<style>
</style>